import React, { useEffect, useState } from 'react'
/* 
  如果state的值是一个引用类型值,我们仍然不能直接修改这个值,而是通过set
  xxx的方式覆盖原有的值
*/
export default function () {
  let [person, setPerson] = useState([{
    id: '001',
    name: '魈'
  }, {
    id: '002',
    name: '神里凌华'
  }, {
    id: '003',
    name: '枫原万叶'
  }])
  useEffect(() => {
    console.log('person改变了');
  }, [person])
  const addPerson = () => {
    setPerson([...person, { id: Date.now(), name: 'xxxx' }])
  }
  return (
    <div>
      <button onClick={addPerson}>添加数据</button>
      <ul>
        {
          person.map(item => {
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
